<template>
  <el-button :loading="isLoading" v-bind="{ ...props }" @click="handleClick">
    <!-- <i class="iconfont" v-if="prefixIco" :class="prefixIco"></i> -->
    <WIcon v-if="prefixIco" :name="prefixIco" />
    <slot>{{ name }}</slot>
    <!-- <i class="iconfont" v-if="suffixIco" :class="suffixIco"></i> -->
    <WIcon v-if="suffixIco" :name="suffixIco" />
  </el-button>
</template>

<script setup lang="ts">
import { WIcon } from "@/components/";
import type { ButtonType } from "./interface/";
import { ref } from "vue";

interface Emit {
  (event: "click", v: ButtonType.Callback): void;
}

defineOptions({ name: "WButton" });
const props = defineProps<ButtonType.Props>();
const emit = defineEmits<Emit>();
const isLoading = ref(false);
const setLoading = (is: boolean) => {
  isLoading.value = is;
};

const handleClick = () => {
  try {
    emit("click", { setLoading });
  } catch (error) {
    console.error(error);
    isLoading.value = false;
  }
};
</script>

<style scoped lang="less">
.iconfont {
  font-size: 14px;
  &:nth-child(1) {
    margin-right: 5px;
  }
  &:nth-child(2) {
    margin-left: 5px;
  }
}
</style>
